﻿<phone:PhoneApplicationPage 
    x:Class="Coding4Fun.Toolkit.Test.WindowsPhone.Samples.Buttons.Tiles"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c4f="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls"
    xmlns:c4fBinding="clr-namespace:Coding4Fun.Toolkit.Controls.Binding;assembly=Coding4Fun.Toolkit.Controls"
    xmlns:sltoolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
		<Grid.Triggers>
			<EventTrigger RoutedEvent="Grid.Loaded" >
				<BeginStoryboard>
					<Storyboard 
						x:Name="trexStoryboard" 
						AutoReverse="True" 
						RepeatBehavior="Forever">
						<DoubleAnimationUsingKeyFrames 
							Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
							Storyboard.TargetName="img">
							<SplineDoubleKeyFrame KeyTime="0:0:1"/>
							<SplineDoubleKeyFrame KeyTime="0:0:36" Value="-307"/>
							<SplineDoubleKeyFrame KeyTime="0:0:37" Value="-307" />
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</BeginStoryboard>
			</EventTrigger>
		</Grid.Triggers>
		<Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="{StaticResource AppName}" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="tiles" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid 
			x:Name="ContentPanel" 
			Grid.Row="1" 
			Margin="12,0"
			sltoolkit:TiltEffect.IsTiltEnabled="True">
			<StackPanel>
				<StackPanel Orientation="Horizontal">
					<c4f:Tile 
                            Margin="0, 0, 12, 0"
                            Width="173"
                            Height="173"
                            Label="Click Me"
							Click="TileClick">
						<Grid>
							<Image 
                                    Source="../../Media/headWhite_100.png" 
                                    Stretch="None" />
							<c4f:TileNotification 
                                    Content="99" />
						</Grid>
					</c4f:Tile>
					<c4f:Tile 
                            Margin="0, 0, 12, 0"
                            Width="173"
                            Height="173"
                            TextWrapping="Wrap"
                            Label="Testing Text Wrapping"> 
						<Image 
                                Source="../../Media/head.png" 
                                Width="100"
                                Height="100"/>
					</c4f:Tile>
					<c4f:Tile 
						IsEnabled="False"
                        Width="72"
                        Height="72"
                        Label="disabled">
					</c4f:Tile>
				</StackPanel>
				<c4f:Tile 
                        HorizontalAlignment="Left"
                        Margin="0, 12"
                        Width="358"
                        Height="173"
                        c4fBinding:FrameworkElementBinding.ClipToBounds="True"
                        Label="Coding4Fun Phone Toolkit">
					<Grid>
						<Canvas>
							<Image 
					                x:Name="img" 
	        		                Source="../../Media/images/trex_360width.jpg" 
	        		                Stretch="None">
								<Image.RenderTransform>
									<CompositeTransform />
								</Image.RenderTransform>
							</Image>
						</Canvas>
						<c4f:TileNotification
                                Padding="18, 0"
                                Background="{StaticResource PhoneAccentBrush}">
							rawr?
						</c4f:TileNotification>
					</Grid>
				</c4f:Tile>

				<c4f:Tile 
                        Height="100"
                        Label="Coding4Fun Phone Toolkit">
					<Grid>
						<StackPanel 
                                Orientation="Horizontal" 
                                VerticalAlignment="Bottom"
                                HorizontalAlignment="Right"
                                Margin="12, 0">
							<TextBlock VerticalAlignment="Bottom">
									<Run>Fri</Run>
									<Run 
										FontSize="54"
										FontWeight="Bold"
										FontFamily="{StaticResource PhoneFontFamilySemiBold}">
										15
									</Run>
							</TextBlock>
						</StackPanel>
						<c4f:TileNotification
                                Padding="0"
                                Background="Transparent"
                                HorizontalAlignment="Left"
								Margin="0">
							<StackPanel Orientation="Horizontal">
								<Image 
									
                                        Height="35"
                                        Stretch="Uniform"
                                        Source="../../Media/icons/appbar.share.rest.png" />
								<TextBlock 
                                        VerticalAlignment="Center">
										Birthday
								</TextBlock>
							</StackPanel>
						</c4f:TileNotification>
					</Grid>
				</c4f:Tile>
				<c4f:Tile 
                    Margin="0, 12"
                    Height="100"
                    Background="Orange"
                    c4fBinding:FrameworkElementBinding.ClipToBounds="True"
                    FontSize="28"
                    Foreground="{StaticResource PhoneChromeBrush}"
                    Label="Coding4Fun Phone Toolkit">
					<Image 
                        HorizontalAlignment="Right"
                        Source="../../Media/headWhite.png" 
                        Stretch="Uniform" 
                        Height="150"
                        Width="150"
                        Margin="0, -25, -28, 0" />
				</c4f:Tile>
			</StackPanel>

		</Grid>
    </Grid>
</phone:PhoneApplicationPage>